<template>
  <div class="outside">
    <div class="year-box">
      <div style="height:100%;overflow-y: auto;">
        <div class="box-header box-item time-title">
          年份
          <!-- <Button class="self-set-btn" icon="addOutline">添加年份</Button> -->
        </div>
        <div v-for="(item,index) in yearList" :key="index" class="box-item box-child" :class="{'is-actived': item.actived}" @click="selectYear(item)">
          {{ item.year }}
          <div class="check-border" :class="{'is-checked': item.actived}">
            <i class="el-icon-check" />
          </div>
        </div>
      </div>
    </div>
    <div class="month-box">
      <div style="height:100%;overflow-y: auto;">
        <div class="box-header box-item time-title">
          月份
          <!-- <Button class="self-set-btn" icon="addOutline">添加月份</Button> -->
        </div>
        <div v-for="(sitem,index) in monthList" :key="index" class="box-item box-child" :class="{'is-actived': sitem.actived}" @click="selectMonth(sitem)">
          {{ sitem.month }}
          <div class="check-border" :class="{'is-checked': sitem.actived}">
            <i class="el-icon-check" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimeSelector',
  props: {
    yearList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      monthList: [],
      currentYear: '',
      currentMonth: ''
    }
  },
  watch: {
    currentMonth: {
      handler(val) {
        this.monthList.map(item => {
          if (item.month === val) {
            item.actived = true
          } else {
            item.actived = false
          }
        })
      },
      immediate: true
    },
    currentYear: {
      handler(val) {
        this.yearList.map(item => {
          if (item.year === val) {
            item.actived = true
          } else {
            item.actived = false
          }
        })
      },
      immediate: true
    }
  },
  created() {
    this.currentYear = this.yearList[0].year
    this.currentMonth = this.yearList[0].monthList[0].month
    this.monthList = this.yearList[0].monthList
  },
  mounted() {},
  methods: {
    selectYear(item) {
      this.currentMonth = ''
      this.currentYear = item.year
      this.monthList = item.monthList
    },
    selectMonth(item) {
      this.currentMonth = item.month
      this.$emit('getTypeByTime', {
        year: this.currentYear,
        month: item.month
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .outside{
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    .year-box{
      flex: 1;
      border-right: 1px solid #EBEEF5;
    }
    .month-box{
      flex: 1;
    }
  }
  .box-item{
    height: 37px;
    padding: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EBEEF5;
    .check-border{
      width: 16px;
      height: 16px;
      display: flex;
      border-radius: 3px;
      align-items: center;
      justify-content: center;
      border: 1px solid #ddd;
      i{
        color: transparent;
      }
    }
  }
  .box-header{
    height: 47px;
    color: #333;
    font-weight: bold;
    background:#f3f6fb;
    border-color: #e7ecf8;
  }
  .box-child:hover{
    color: #fff;
    background: #217dfa;
  }
  .is-actived{
    color: #fff;
    background: #217dfa;
  }
  .is-checked{
    border: 1px solid #fff;
    i{
      color: #fff !important;
    }
  }
  .time-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .self-set-btn{
    padding: 7px 5px !important;
    font-size: 12px !important;
  }
</style>
